<template>
  <a-modal
    title="添加"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <a-form-item
        label="账号"
        :labelCol="{lg: {span: 5}, sm: {span: 3}}"
        :wrapperCol="{lg: {span: 12}, sm: {span: 21} }">
        <a-input
          :disabled="true"
          v-decorator="[
            'loginName',
            {rules: [{ required: true, message: '请输入账号' }]}
          ]"
          name="loginName"
          placeholder="请输入账号" />
      </a-form-item>
      <a-form-item
        label="姓名"
        :labelCol="{lg: {span: 5}, sm: {span: 3}}"
        :wrapperCol="{lg: {span: 12}, sm: {span: 21} }">
        <a-input
          v-decorator="[
            'userName',
            {rules: [{ required: true, message: '请输入姓名' }]}
          ]"
          name="userName"
          placeholder="请输入姓名" />
      </a-form-item>
      <a-form-item
        label="角色"
        :labelCol="{lg: {span: 5}, sm: {span: 3}}"
        :wrapperCol="{lg: {span: 12}, sm: {span: 21} }">
        <a-select
          placeholder="请选择分类"
          style="max-width:200px"
          name="roleId"
          v-decorator="[
            'roleId',
            {rules: [{ required: true, message: '请选择分类' }]}
          ]">
          <a-select-option :value="item.id" v-for="(item, index) in optionRole" :key="index">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="状态"
        :labelCol="{lg: {span: 5}, sm: {span: 3}}"
        :wrapperCol="{lg: {span: 12}, sm: {span: 21} }">
        <a-select
          placeholder="请选择状态"
          style="max-width:200px"
          name="enabled"
          v-decorator="[
            'enabled',
            {rules: [{ required: true, message: '请选择状态' }]}
          ]">
          <a-select-option :value="item.value" v-for="(item, index) in optionList" :key="index">{{ item.label }}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <template slot="footer">
      <a-button key="cancel" @click="handleCancel">取消</a-button>
      <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleNext()">确认</a-button>
    </template>
  </a-modal>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'EditModal',
  components: {
  },
  data () {
    return {
      id: '',
      optionRole: [],
      optionList: [
        { label: '启用', value: 'true' },
        { label: '禁用', value: 'false' }
      ],
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this)
    }
  },
  mounted () {
  },
  methods: {
    ...mapActions(['RoleList', 'ManagerEdit']),
    edit (record) {
      this.visible = true
      this.id = record.id
      var self = this
      this.$nextTick(() => {
        self.RoleList({
          keyword: '',
          page: 1,
          pageSize: 10000
        })
          .then((res) => {
            if (res.status === 200 || res.status === '200') {
              if (res.data.list && res.data.list.length !== 0) {
                self.optionRole = res.data.list
              }
            } else {
              self.requestFailed(res)
            }
          })
          .catch(err => self.requestFailed(err))
        self.form = self.$form.createForm(self, {
          mapPropsToFields: () => {
            return {
              loginName: self.$form.createFormField({
                value: record.loginName || ''
              }),
              userName: self.$form.createFormField({
                value: record.userName || ''
              }),
              roleId: self.$form.createFormField({
                value: record.roleId || ''
              }),
              enabled: self.$form.createFormField({
                value: String(record.enabled) || ''
              })
            }
          } })
      })
    },
    handleNext () {
      const { form: { validateFields } } = this
      validateFields((errors, values) => {
        if (!errors) {
          this.confirmLoading = true
          var data = {
            id: this.id,
            roleId: values.roleId,
            userName: values.userName,
            enabled: values.enabled
          }
          this.ManagerEdit(data)
            .then((res) => this.submitSuccess(res))
            .catch(err => this.requestFailed(err))
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.visible = false
    },
    submitSuccess (res) {
      if (res.status === 200 || res.status === '200') {
        this.$notification['success']({
          message: '成功',
          description: '编辑成功',
          duration: 4
        })
        setTimeout(() => {
          this.confirmLoading = false
          this.visible = false
          this.$emit('ok', res)
        }, 1000)
      } else {
        this.requestFailed(res)
      }
    },
    requestFailed (err) {
      this.$notification['error']({
        message: '错误',
        description: err.message || '请求出现错误，请稍后再试',
        duration: 4
      })
      setTimeout(() => {
        this.confirmLoading = false
      }, 1000)
    }
  }
}
</script>
